<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-08 16:04:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-15 11:00:14
 * @FilePath: \test\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="notify-tabs-box">
        <Card>
            <van-row class="after-border-box">
                <van-col :span="12" v-for="(item,index) in tabList" :key="index">
                    <div class="common-inactive-box" @click="checkType(index)"
                        :class="currentIndex == index ? 'common-active-box' : ''">
                        <div>{{ item.name }}</div>
                    </div>
                </van-col>
            </van-row>
        </Card>
        <div class="top-checkall-box">
            <van-row class="color6">
                <van-col :span="12">全部名单</van-col>
                <van-col :span="12">
                    <van-row justify="end" class="row">
                        <!-- <van-icon name="circle" size="20" color="#E8E8E8" /> -->
                        <van-icon name="checked" size="20" color="#3D7FFF" />
                        <span style="margin-left:10px;">全选</span>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <div class="warning-content-box">
            <Card v-for="(item, index) in 3" :key="index">
                <div class="row">
                    <div class="icon-flex-box row">
                        <van-image round width="44px" height="44px" fit="contain" :src="personImg" />
                    </div>
                    <div class="info-flex-box flex1">
                        <div class="row">孙茹芸 06<span class="status-flex-box">预警</span></div>
                        <div>初中部2021级(03)班</div>
                    </div>
                    <div class="right-flex-box">
                        <van-icon name="circle" size="20" color="#E8E8E8" />
                        <!-- <van-icon name="checked" size="20" color="#3D7FFF" /> -->
                    </div>
                </div>
                <Card bgColor="#f9f9f9" class="font14 color9">
                    <van-row style="margin-bottom:10px;">
                        <van-col :span="6">宿舍评分</van-col>
                        <van-col :span="18" style="color:#FF5B44;">
                            -2分
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col :span="6">宿舍楼层</van-col>
                        <van-col :span="18" class="color3">
                            至礼楼-1层101寝室
                        </van-col>
                    </van-row>
                </Card>
                <div class="add-row-cc font14">
                    <div class="add-icon">
                        <van-icon name="plus" color="#999999" />
                    </div>
                    <div>选择抄送人</div>
                </div>
                <van-row class="font14">
                    <van-col :span="12" class="row" style="margin-top: 15px;" v-for="(item, index) in 4" :key="index">
                        <van-image round width="30px" height="30px" fit="contain" :src="personImg" />
                        <span style="margin-left:10px;">何思琪(班主任)</span>
                    </van-col>
                </van-row>
            </Card>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import $util from '../util/util'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import personImg from "../assets/images/person.png";
const store = useStore()
const currentIndex = ref(0)
const tabList = ref([
    {
        name: '待通报'
    },
    {
        name: '已通报',
    }
])
const checkType = (Index: number) => {
    currentIndex.value = Index
}
onMounted(async () => {
})
</script>
<style lang="scss" scoped>
.notify-tabs-box {
    padding: 0px 15px;

    .common-inactive-box {
        color: #999999;
        text-align: center;

        div {
            font-size: 16px;
            font-family: Medium;
            margin-top: 5px;
        }
    }

    .after-border-box {
        position: relative;
    }

    .after-border-box:after {
        content: '';
        width: 1px;
        height: 34px;
        background: rgba(200, 200, 200, 0.6);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    .common-active-box {
        color: #3D7FFF;
    }

    .top-checkall-box {
        margin: 15px 0;
    }

    .info-flex-box {
        margin-left: 15px;

        .status-flex-box {}

        div:last-of-type {
            font-size: 14px;
            color: #999999;
            margin-top: 5px;
        }
    }

    .right-flex-box {
        color: #FF5B44;
    }

    // 内容区域
    .warning-content-box {
        .status-flex-box {
            padding: 2px 12px;
            color: #ffffff;
            font-size: 14px;
            border-radius: 24px 24px 24px 0px;
            margin-left: 10px;
            background: #FFB533;
            display: inline-block;
            margin-top: -6px;
        }

        .add-row-cc {
            display: flex;
            align-items: center;
            margin-top: 15px;

            .add-icon {
                width: 30px;
                height: 30px;
                background: #F9F9F9;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            div:last-of-type {
                flex: 1;
                display: inline-block;
                margin-left: 10px;
            }
        }
    }
}
</style>
